<template>
  <view class="container" :style="{backgroundImage: `url(${staticImgs.bg})`}">
	  <view class="content-text-gd">
      <rich-text :nodes="sclInfo.details" />
	  </view>
    <view :style="{backgroundImage: `url(${staticImgs.price})`}" class="price-bg">
      <text><text class="small">&yen;</text>{{sclInfo.originalPrice}}</text>
      <text :style="{marginLeft: '20rpx', fontSize: '30rpx'}">券后</text>
      <text :style="{marginLeft: '6rpx'}"><text class="small">&yen;</text>{{sclInfo.newOriginalPrice}}</text>
    </view>
    <view class="back-btn flex-cc" @click.stop="backHandle">
      <view class="back-text">更多测评</view>
      <image :src="staticImgs.backArrow" class="back-arrow" />
    </view>
	  <image :src="staticImgs.btn" class="pay-btn" mode="widthFix" @click.stop="payHandle" />
  </view>
</template>

<script>
  import {orderPay} from '@/common/api/scl_api.js'
  import {removeEmptyProperty} from '@/common/utils/util.js'
  import {debounce} from 'lodash'

  export default {
    props: {
      sclId: {
        type: String,
        default: '',
      },
      sclName: {
        type: String,
        default: '',
      },
      couponInfo: {
        type: Object,
        default: {},
      },
      sclInfo:{
        type: Object,
        default: {},
      }
    },
    data() {
      return {
        staticImgs: {
          bg: this.imgBaseURL + '/scl/question-page/queen/pay-bg.png',
          btn: this.imgBaseURL + '/scl/question-page/queen/pay-btn.png',
          price: this.imgBaseURL + '/scl/question-page/queen/price-bg.png',
          backArrow: this.imgBaseURL + '/scl/question-page/queen/back-arrow.png'
        },
        loading: false
      }
    },
    methods: {
      backHandle() {
        uni.reLaunch({
          url: '/pages/sclList/sclList'
        })
      },
      payHandle: debounce(async function(payHandleType) {
        if (this.loading) return
        uni.showLoading({
          title: "请求支付中..."
        })

        this.loading = true

        console.log(payHandleType,'======payHandleType')

        const that = this
        const submitForm = removeEmptyProperty({
          sclId: this.sclId,
          orderType: '7',
          adClickId: uni.getStorageSync('adClickId')
        })

        const {data: tmpRes} = await this.$u.api.getWxPayToken({
          sclId: this.sclId
        })
        submitForm.sclPayToken = tmpRes.data
        orderPay(submitForm).then(res => {
          if (res.data.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                that.$store.dispatch('user/getUserDiscountTakeEffect')
                that.$emit('payOk')
              },
              fail: function(err) {
                that.$showToast(res.data.message);
                uni.showLoading()

                setTimeout(() => {
                  uni.hideLoading()
                  that.loading = false
                }, 300)
              }
            });
          } else {
            uni.hideLoading()
            that.$showToast(res.data.message);
            
            setTimeout(()=>{
              this.loading = false
            },300)
          }
        }).catch(e => {
          setTimeout(() => {
            this.loading = false
          }, 300)
        })

      }, 500)
    }
  }
</script>

<style lang="scss" scoped>
	.content-text-gd {
    position: absolute;
    top: 460rpx;
    left: 181rpx;
    font-weight: bold;
    font-size: 34rpx;
    color: #FFF;
    line-height: 82rpx;
    letter-spacing: 6rpx;
	}

  .container {
    height: 1624rpx;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
  }


  .price-bg {
    width: 552rpx;
    height: 91rpx;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 257rpx;
    margin: 0 auto;
    font-weight: bold;
    font-size: 40rpx;
    color: #8C3655;
    display: flex;
    justify-content: center;
    background-size: 100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
    pointer-events: none;
    align-items: center;

    .small {
      font-size: 21rpx;
    }
  }

  .back-btn {
    position: absolute;
    top: 284rpx;
    width: 163rpx;
    height: 63rpx;
    background-color: rgba(150, 62, 72, 0.68);
    border-radius: 0 32rpx 32rpx 0;
    left: 0;

    .back-text {
      font-size: 26rpx;
      color: #FFF;
    }

    .back-arrow {
      width: 30rpx;
      height: 30rpx;
    }
  }

  .pay-btn {
    position: absolute;
    bottom: 143rpx;
    width: 298rpx;
    height: 63rpx;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
</style>